<style>
	page{background: #fff;}
</style>

<style lang="scss" scoped>
	/deep/ .u-countdown-item{padding: 6rpx;}
	/deep/ .u-countdown-colon{padding: 0 8rpx;}
	.root{
		.c2{background: $main-color;padding:10rpx 20rpx;position: relative;background:linear-gradient(to left,#FF6F7E, #EA2948);}
		.c2 view{color: #fff;}
		.c3{position: absolute;left:180rpx;top:-6rpx;}
		.c5 text{font-size: 24rpx;position: relative;top:-2rpx;}
		.c5{font-size: 40rpx;height: 40rpx;line-height: 40rpx;}
		.c6{font-size: 26rpx;margin-left: 5rpx;}
		.c8{text-align: center;line-height: 38rpx;height: 38rpx;}
		.c11{margin-right: 80rpx;}
		.c14{margin-right: 0;}
		.c16{font-size: 36rpx;}
		.c17{color: #999999;font-size: 24rpx;margin-bottom: 20rpx;}
		.c19{color: #999;margin-top: 30rpx;}
		.c19 view{color: #999;}
		.c19 text{color: #999;margin-right: 8rpx;}
		.c20{margin: 20rpx auto;}
		.c20 view{color: #555;}
		.c20 .c21{color: #fff;}
		.c21{background:#CCCCCC;color: #fff;line-height: 42rpx;border-radius: 42rpx;padding: 0 20rpx;font-size: 26rpx;}
		.c22{padding: 0 20rpx;}
		.c23 .c21{background: $main-color;color: #fff;}
		.c23 .c22{color: $main-color;}
		.c24{width: 180rpx;}
		.c27{font-size: 28rpx;padding:0 30rpx 10rpx;color: #999;border-bottom:2rpx solid #f1f1f1;}
		
		.c28{padding: 30rpx;}
		
		.c29{padding: 0 30rpx 0 10rpx;background: #fff;position: fixed;left: 0;bottom: 0;width: 750rpx;box-sizing: border-box;padding-bottom: env(safe-area-inset-bottom)}
		.c30 view{color: #555;}
		.c31{color: #fff;background: $main-color;line-height: 88rpx;height: 88rpx;border-radius: 88rpx;flex:1;text-align: center;margin-left: 30rpx;font-size: 30rpx;}
		.c32{width: 100rpx;text-align: center;}
		.c32 .iconfont{font-size: 40rpx;}
		.c33{margin-top: -15rpx;}
		.c34{height: 108rpx;width: 100%;padding-bottom: env(safe-area-inset-bottom)}
		.c35{background: #bbb;}
		.c36{padding: 26rpx;}
		.c37{text-align: center;font-size: 32rpx;}
		.c38{text-align: center;font-size: 60rpx;color: $main-color;margin: 40rpx auto;font-weight: bold;}
		.c38 text{font-size: 32rpx;}
		.c39{text-align: center;margin-bottom: 50rpx;padding-bottom: env(safe-area-inset-bottom);}
		.c39 text{background: #ccc;color: #fff;line-height: 88rpx;height: 88rpx;border-radius: 88rpx;padding: 0 200rpx;display: inline-block;font-size: 32rpx;}
		.c40{background: #F8F8F8;padding: 20rpx;border-radius: 18rpx;margin:50rpx 20rpx;}
		.c43{color: #999;line-height: 40rpx;margin-top: 10rpx;}
		.c44{color: #999;}
		.c45{text-align: center;}
		.c46{width: 400rpx;margin: 50rpx auto 10rpx;}
		.c48{font-size: 50rpx;font-weight: bold;color: $main-color;position: relative;top:-4rpx}
		.c49{justify-content: center;margin-bottom: 50rpx;}
		.c49 view{margin: 0 30rpx;color: #555;}
		.c50.c39 text{background: $main-color;}
		.c51{background: #353535;}
		.c52{padding: 20rpx;background:linear-gradient(to left,#666, #353535);}
		.c53{text-align: center;color: #aaa;margin: 20rpx auto 50rpx;}
	}
</style>

<template>
	<view  class="root">
		<view class="c1">
			<u-swiper :list="pageData.banner" border-radius="0" height="750"></u-swiper>
		</view>
		
		<!-- 预展中 -->
		<view class="c2 u-flex u-row-between" v-if="info.time < info.start_time" style="background:linear-gradient(to left,#FFA907, #FE8707);">
			<u-icon name="arrow-right-double" color="#fedade47" size="118" class="c3"></u-icon>
			<view class="c4">
				<view class="c5"><text>￥</text>{{currentPrice}}</view>
				<view class="c6">起拍价</view>
			</view>
			<view class="c7">
				<view class="c8">距开拍仅剩</view>
				<view class="c9">
					<u-count-down :timestamp="info.start_time - info.time" :show-days="true" :show-hours="true" separator="zh"  color="#FFFFFF" font-size="24" separator-size="24" bg-color="#b45f04" separator-color="#fff" @end="timeRefresh"></u-count-down>
				</view>
			</view>
		</view>
		
		<!-- 拍卖中 -->
		<view class="c2 u-flex u-row-between" v-if="info.time > info.start_time && info.time < info.end_time">
			<u-icon name="arrow-right-double" color="#fedade47" size="118" class="c3"></u-icon>
			<view class="c4">
				<view class="c5"><text>￥</text>{{currentPrice}}</view>
				<view class="c6">当前价</view>
			</view>
			<view class="c7">
				<view class="c8">距结拍仅剩</view>
				<view class="c9">
					<u-count-down :timestamp="pageData.djsTime" :show-days="true" :show-hours="true" separator="zh"  color="#FFFFFF" font-size="24" separator-size="24" bg-color="#932431" separator-color="#fff" @end="timeRefresh"></u-count-down>
				</view>
			</view>
		</view>
		
		<!-- 拍卖结束 -->
		<view class="c2 u-flex u-row-between c52" v-if="info.time > info.end_time">
			<u-icon name="arrow-right-double" color="#666" size="100" class="c3"></u-icon>
			<view>已结拍</view>
			<view>结束时间：{{$u.timeFormat(info.end_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
		</view>

		
		<view class="u-p-30">
			<view class="c15">
				<view class="c16">{{info.sku_name}}</view>
				<view class="c17">{{info.introduction}}</view>
				<view class="c10 u-flex">
					<view class="c11">
						<view class="c12">起拍价 ￥{{info.money}}</view>
						<view class="c13"></view>
					</view>
					<view class="c11">
						<view class="c12">加价幅度 ￥{{info.add_money}}</view>
						<view class="c13"></view>
					</view>
	<!-- 				<view class="c11 c14">
						<view class="c12">保证金</view>
						<view class="c13">￥50</view>
					</view> -->
				</view>
			</view>
			<view class="c18">
				<view class="c19 u-flex u-row-between">
					<view>出价记录</view>
					<view @click="$u.route('/pagesA/jp/price_list?id='+goods_sku_id)">
						<text>{{pageData.chujiaList.length}}</text>
						<u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
					</view>
				</view>
				<block v-if="pageData.chujiaList.length > 0">
					<view v-for="(v,index) in pageData.chujiaList" :key="v.log_id">
						<view class="u-flex u-row-between c20" :class="{'c23':index==0}" v-if="index < 3">
							<u-avatar :src="v.headimg" size="50"></u-avatar>
							<view class="c24 u-line-1">{{v.realname || '暂无昵称'}}</view>
							<view class="c25">{{$u.timeFormat(v.create_time, 'mm.dd hh:MM:ss')}}</view>
							<view class="c22">￥{{v.money}}</view>
							<view class="c21">
								{{index==0?'领先':'出局'}}
							</view>
						</view>
					</view>
					<view class="c53">
						<navigator :url="'./price_list?id='+info.goods_sku_id">查看全部出价记录</navigator>
					</view>
				</block>

				<view v-if="pageData.chujiaList.length == 0" class="u-p-t-50">
					<u-empty text="暂无出价记录" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<view class="c26">
			<view class="c27">产品详情</view>
			<view class="c28">
				<u-parse :html="info.goods_content"></u-parse>
			</view>
		</view>
		<u-divider class="u-p-20">已经拉到底了</u-divider>
		<view class="c34"></view>
		<view class="c29 u-flex">
			<view class="c30 u-flex">
				<view class="c32" @click="$util.redirectTo('/pages/index/index/index')">
					<i class="iconfont iconshouye11"></i>
					<view class="c33">首页</view>
				</view>
<!-- 				<view class="c32">
					<i class="iconfont iconkefu11"></i>
					<view class="c33">客服</view>
				</view> -->
			</view>

			<block v-if="info.time < info.start_time">
				<view class="c31 c35">暂未开始</view>
			</block>
			<block v-if="info.time > info.start_time && info.time < info.end_time">
				<view class="c31" v-if="pageData.balance>=Number(info.deposit)" @click="chujiaFun(1)">
					立即出价
				</view>
				<view class="c31 c35" v-else>余额需要大于￥{{info.deposit}}</view>
			</block>
			<block v-if="info.time > info.end_time">
			
				<block v-if="memberInfo.member_id == info.member_id && info.order_id == 0 && info.time < (info.end_time+86400)">
					<view class="c31" @click="payOrder">恭喜获得拍品，去支付</view>
				</block>
				<block v-else-if="memberInfo.member_id == info.member_id && info.order_id == 0 && info.time > (info.end_time+86400)">
					<view class="c31 c51">支付超时，订单已取消</view>
				</block>
				<block v-else>
					<view class="c31 c51">拍卖已经结束</view>
				</block>
			</block>
		</view>
		
		<u-popup v-model="baozhengjinBox" mode="bottom" :closeable="true" border-radius="40">
			<view class="c36">
				<view class="c37">冻结保证金</view>
				<view class="c38">
					<text>￥</text>{{info.deposit}}
				</view>
				<view class="c39 c50" @click="chujiaFun(2)">
					<text>确 定</text>
				</view>
			</view>
		</u-popup>
		
<!-- 		<u-popup v-model="addrBox" mode="bottom" :closeable="true" border-radius="40">
			<view class="c36">
				<view class="c37">收货地址</view>
				<block v-if="pageData.addr">
					<view class="c40">
						<view class="c41 u-flex u-row-between">
							<view class="c42">啦啦啦 13128138787</view>
							<view class="c44" @click="selectAddress">
								更换
								<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
							</view>
						</view>
						<view class="c43">
							北京市-北京市-朝阳区人民大道001号2号都1楼1008号办公室
						</view>
					</view>
					
					<view class="c39 c50" @click="chujiaFun(3)">
						<text>确 定</text>
					</view>
				</block>
				<block v-else>
					<u-divider class="u-p-t-50">暂无收货地址</u-divider>
					<view class="c39 u-p-t-50" @click="selectAddress">
						<text>去添加收货地址</text>
					</view>
				</block>

			</view>
		</u-popup> -->
		
		<u-popup v-model="chujiaBox" mode="bottom" :closeable="true" border-radius="40">
			<view class="c36">
				<view class="c37">出价</view>
				<div class="c46 u-flex u-row-between">
					<div class="c47">
						<u-icon name="minus-circle" color="#555" size="68" v-if="formData.price > currentPrice" @click="add((parseFloat(formData.price) - parseFloat(info.add_money)),1)"></u-icon>
						<u-icon name="minus-circle" color="#ccc" size="68" v-else></u-icon>
					</div>
					<div class="c48">{{formData.price}}</div>
					<div class="c47">
						<u-icon name="plus-circle" color="#555" size="68"  @click="add((parseFloat(formData.price) + parseFloat(info.add_money)),2)"></u-icon>
					</div>
				</div>
				<div class="c49 u-flex">
					<view>当前价格：￥{{parseFloat(info.member_price) > 0?info.member_price:info.money}}</view>
					<view>加价幅度：￥{{info.add_money}}</view>
				</div>
				<view :class="formData.price > currentPrice?'c39 c50':'c39'" @click="subForm()">
					<text>确定出价</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				is_over:false,//是否已经结束
				chujiaBox:false,//出价弹窗
				addrBox:false,//确定地址弹窗
				baozhengjinBox:false,//保证金弹窗
				formData:{
					price:0
				},
				pageData:{
					is_baozhengjin:false,//是否已经扣除保证金
					is_addr:false,//是否确认过收货地址
					balance:2000,//用户余额
					addr:false,//是否有地址
					price:1750,//当前最高出价
					pushPrice:50,//每次加价幅度
					banner: [],
					chujiaList:[],//出价列表
					djsTime:0,//倒计时时间
				},
				info:{
					list:null
				},
				balance_money:{
					balance_money: 0, 
					balance:0
				},
				auction:null,
				current:{
					
				},
				currentPrice:0,//当前价格
				memberInfo:{
					member_id:0
				},
				goods_sku_id:0
			}
		},
		watch:{
			
		},
		onLoad(e){
			_this = this;
			
			this.goods_sku_id = e.id;
			
			this.$api.sendRequest({
				url: '/api/member/info',
				success: res => {
					this.memberInfo = res.data;
				}
			});
			
			console.log(this.$config.baseUrl);
			
			// 判断登录
			if (!uni.getStorageSync('token')) {
				this.$util.redirectTo('/pages/login/login/login');
			} else {
				this.getPageData(e.id)
			}

			// .判断是否已连接
			this.checkOpenSocket();

		},
		onShow() {
			if (uni.getStorageSync('addressBack')) {
				uni.removeStorageSync('addressBack');
			}
			
			// .判断是否已连接
			this.checkOpenSocket();
		},
		onHide(){
			clearInterval(this.timeoutObj);
			uni.closeSocket();
			uni.onSocketClose(function (res) {
				console.log('WebSocket 已关闭！');
			});
			this.$api.sendRequest({
				url: '/clap/api/Chat/bye',
				data: {
					goods_sku_id:this.goods_sku_id
				},
				success(res) {

				}
			})
		},
		onUnload() {
			clearInterval(this.timeoutObj);
			uni.closeSocket();
			uni.onSocketClose(function (res) {
				console.log('WebSocket 已关闭！');
			});
			this.$api.sendRequest({
				url: '/clap/api/Chat/bye',
				data: {
					goods_sku_id:this.goods_sku_id
				},
				success(res) {

				}
			})
		},
		methods:{
			add(v,type){
				console.log(v);
				this.formData.price = v;
			},
			
			
			// 判断是否已连接
			checkOpenSocket() {
				console.log('判断是否已连接')
				// alert('判断是否已连接')
				let self = this;
				uni.sendSocketMessage({
					data: 'ping',
					success: (res) => {
						console.log('连接成功,检查')
						// alert('连接成功,检查')
						return;
					},
					fail: (err) => { // 未连接打开websocket连接
						console.log('连接失败',this.$config.webSocket)
						// alert('连接失败')
						self.openConnection();
					}
				});
			},
			openConnection() { // 打开连接
				console.log('打开连接')
				// alert('打开连接')
				uni.closeSocket(); // 确保已经关闭后再重新打开
				uni.connectSocket({
					url: this.$config.webSocket,
					method: 'POST',
					success(res) {
						console.log('连接成功 connectSocket=', res);
						// alert('连接成功 connectSocket=', res);
					},
					fail(err) {
						console.log('连接失败 connectSocket=', err);
					}
				});
				uni.onSocketOpen((res) => {
					console.log('连接成功', res);
				});
				this.onSocketMessage(); // 打开成功监听服务器返回的消息
			},
			//	打开成功监听服务器返回的消息
			onSocketMessage() { // 消息
				console.log("开始监听");

				let that = this;
				this.pingInterval = this.$config.pingInterval;
				this.timeoutObj = null;
				uni.onSocketMessage((res) => { //type:init,connect,close,string,order,goods
					let msg = JSON.parse(res.data);
					console.log(msg);
					if(msg.type == 'init'){
						console.log('绑定产品ID');
						this.$api.sendRequest({
							url: '/clap/api/Chat/bind',
							data: {
								client_id:msg.data.client_id,
								goods_sku_id:this.goods_sku_id
							}
						})
					}
					if(msg.type == 'add'){
						console.log('有人出价');
						this.getPageData(this.goods_sku_id)
					}
					
					

					this.reset();
				});
			},
			
			// 检测心跳reset
			reset() {
				console.log("检测心跳")
				clearInterval(this.timeoutObj);
				this.start(); // 启动心跳
			},
			
			// 启动心跳 start 
			start() {
				console.log("启动心跳")
				let self = this;
				this.timeoutObj = setInterval(function() {
					uni.sendSocketMessage({
						data: 'ping',
						success: (res) => {
							console.log('连接中....');
						},
						fail: (err) => {
							console.log('连接失败重新连接....');
							self.openConnection();
						}
					});
				}, 10000);
			},
			
			//倒计时结束
			timeRefresh(){
				this.getPageData(this.info.goods_sku_id)
			},
			
			//1点击出价 2确认保证金
			chujiaFun(type){
				if(this.auction){
					console.log(this.auction,88);
					this.chujiaBox = true;
				}else{
					if(type == 1){
						return this.baozhengjinBox = true;
					}
					if(type == 2){
						this.$api.sendRequest({
							url: '/clap/api/Goods/addAuction',
							data: {
								goods_sku_id:this.info.goods_sku_id
							},
							success: res => {
								if(res.code == 0){
									this.baozhengjinBox = false;
									this.chujiaBox = true;
								}else{
									this.$u.toast(res.message)
								}
							}
						})
					}
				}
			},
			
			subForm(){
				if(this.formData.price > this.currentPrice){
					this.$api.sendRequest({
						url: '/clap/api/Goods/addLog',
						data: {
							goods_sku_id:this.info.goods_sku_id,
							money:this.formData.price,
						},
						success: res => {
							if(res.code == 0){
								this.chujiaBox = false;
								this.getPageData(this.info.goods_sku_id)
							}else{
								this.$u.toast(res.message)
							}
						}
					})
				}else{
					this.$u.toast('出价必须大于当前价格')
				}
			},
			
			// 选择收货地址
			selectAddress() {
				var params = {
					back: '/pagesA/jp/details',
					local: 0,
					type: 1
				}
				this.$util.redirectTo('/otherpages/member/address/address', params);
			},
			getPageData(id){
				this.$api.sendRequest({
					url: '/clap/api/Goods/info',
					data: {
						goods_sku_id:id
					},
					success: res => {
						this.pageData.banner  = [this.$config.imgDomain +'/'+ res.data.list.sku_image]
						this.balance_money = res.data.member
						this.auction = res.data.auction
						this.info = res.data.list;
						this.currentPrice = parseFloat(this.info.member_price) > 0?parseFloat(this.info.member_price):parseFloat(this.info.money)
						this.formData.price = this.currentPrice
						this.pageData.chujiaList = res.data.log;
						this.pageData.djsTime = res.data.list.end_time - res.data.list.time
					}
				})
			},
			//去支付订单
			payOrder(){
				uni.setStorage({
					key: 'orderCreateData',
					data: {
						sku_id: this.info.sku_id,
						num: 1,
						seckill_id: this.info.goods_sku_id,
						deposit: this.info.deposit,
					},
					success: function () {
						uni.navigateTo({
							url:'/pagesA/jp/payment'
						})
					}
				});
			}
			
		},
		onPullDownRefresh(){

		},
	}
</script>

